<template>
    <div>
        <el-button type="success" @click="isShowDialog('insert')" icon="el-icon-plus" v-if="!peknowledgebaseView">新增</el-button>
        <!-- 查询 -->
        <el-popover placement="bottom-start" width="1000" style="box-shadow: 0 0 8px rgba(0,0,0,.5);margin:0 10px;" trigger="click">
            <el-form :inline="true" :model="searchList">
                    <el-form-item label="疾病与技术" >
                        <el-input v-model="searchList.diseaseName" style="width: 100px;"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="疾病状态：">
                        <el-input v-model="searchList.diseaseStatus" style="width: 100px;"></el-input>
                    </el-form-item>
                    <el-form-item label="治疗科室：">
                        <el-input v-model="searchList.dept" style="width: 100px;"></el-input>
                    </el-form-item>
                    <el-form-item label="推荐等级：">
                        <el-input v-model="searchList.level" style="width: 100px;"></el-input>
                    </el-form-item>
                    <el-form-item label="TA方法：">
                        <el-input v-model="searchList.ta" style="width: 100px;"></el-input>
                    </el-form-item> -->
                    <el-form-item label="创建人：">
                        <el-select v-model="searchList.creator" placeholder="请选择">
                            <el-option label="【空】" value=""></el-option>
                            <el-option v-for="item in creatorList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-button type="primary" @click="searchData" icon="el-icon-search">查询</el-button>
                </el-form>
            <el-button slot="reference" type="primary">查询</el-button>
        </el-popover>
         <el-button type="primary" @click="isShowDialog('tag')">标签</el-button>
        <!-- 搜索 -->
        <!-- 表格 -->
        <el-table :data="tabaleData" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;" :height="tableHeight"  v-loading="loading">
            <el-table-column fixed type="index" label="*" sortable min-width="40" align="center"></el-table-column>
            <el-table-column prop="diseaseName" label="疾病与技术" show-overflow-tooltip sortable min-width="120" align="center"></el-table-column>
            <!-- <el-table-column prop="diseaseStatus" label="疾病状态"  sortable min-width="80" align="center"></el-table-column>
            <el-table-column prop="dept" label="治疗科室" sortable min-width="120" align="center"></el-table-column>
            <el-table-column label="推荐等级" sortable min-width="80" align="center">
                <template slot-scope="scope">
                    <el-tag type="success">{{scope.row.level}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="ta" label=" TA方法" show-overflow-tooltip sortable  min-width="170" align="center"></el-table-column> -->
            <el-table-column prop="creatorName" label="创建人" sortable min-width="80" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" sortable min-width="100" align="center"></el-table-column>
            <el-table-column fixed="right" label="操作" sortable align="center" width="200">
                <template slot-scope="scope">
                    <el-button @click="isShowDialog('detail',scope.row)" type="text" size="small">详情</el-button>
                    <el-button @click="isShowDialog('update',scope.row)" type="text" size="small" v-if="!peknowledgebaseView">修改</el-button>
                    <el-button @click="isShowDialog1(scope.row)" type="text" size="small"><span  class="sub-fn-color1">汇总查看</span></el-button>
                    <el-button @click="deleteDate(scope.row)" type="text" size="small" v-if="!peknowledgebaseView"><span class="sub-fn-color3">删除</span></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
        <!-- 弹框 -->
        <el-dialog v-if="dialog.action===1" :title="dialog.title" :width="dialog.width" top="30px" :visible.sync="dialog.isShow" :close-on-click-modal="false" style="padding: 24px;box-sizing:border-box;">
            <div  style="dialogHeightPane">
               <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="疾病概述" name="1" class="paddingbottom24">
                        <div v-if="activeName==='1'"><pe-detail :changeActive = 'changeActive' :epKnowledId="epKnowledId"  :disabled="peknowledgebaseView"></pe-detail></div>
                    </el-tab-pane>
                    <el-tab-pane label="流行病学" name="2" class="paddingbottom24">
                        <div  v-if="activeName==='2'"><pe-detail :changeActive = 'changeActive' :epKnowledId="epKnowledId"  :disabled="peknowledgebaseView"></pe-Detail></div>
                    </el-tab-pane>
                    <el-tab-pane label="医学经济学" name="3" class="paddingbottom24">
                      <div  v-if="activeName==='3'"><pe-detail :changeActive = 'changeActive' :epKnowledId="epKnowledId"  :disabled="peknowledgebaseView"></pe-detail></div>
                    </el-tab-pane>
                    <el-tab-pane label="诊断标准" name="4" class="paddingbottom24">
                        <div   v-if="activeName==='4'"><pe-detail :changeActive = 'changeActive' :epKnowledId="epKnowledId"  :disabled="peknowledgebaseView"></pe-detail></div>
                    </el-tab-pane>
                     <el-tab-pane label="评估标准" name="10" class="paddingbottom24">
                        <div   v-if="activeName==='10'"><pe-detail :changeActive = 'changeActive' :epKnowledId="epKnowledId"  :disabled="peknowledgebaseView"></pe-detail></div>
                    </el-tab-pane>
                    <el-tab-pane label="传统治疗" name="5" class="paddingbottom24">
                        <div  v-if="activeName==='5'"><pe-detail :changeActive = 'changeActive' :epKnowledId="epKnowledId"  :disabled="peknowledgebaseView"></pe-detail></div>
                    </el-tab-pane>
                    <el-tab-pane label="UBIO治疗" name="11" class="paddingbottom24">
                        <div  v-if="activeName==='11'"><pe-detail :changeActive = 'changeActive' :epKnowledId="epKnowledId"  :disabled="peknowledgebaseView"></pe-detail></div>
                    </el-tab-pane>
                    <el-tab-pane label="副作用及应对" name="6" class="paddingbottom24">
                        <div  v-if="activeName==='6'"><pe-detail :changeActive = 'changeActive' :epKnowledId="epKnowledId"  :disabled="peknowledgebaseView"></pe-detail></div>
                    </el-tab-pane>
                    <el-tab-pane label="原文献" name="7" class="paddingbottom24">
                         <div  v-if="activeName==='7'"><primary-sources  :epKnowledId="epKnowledId"  :disabled="peknowledgebaseView"></primary-sources></div>
                    </el-tab-pane>
                    <el-tab-pane label="图片集" name="8" class="paddingbottom24">
                        <div  v-if="activeName==='8'">
                            <picture-upload :epKnowledId="epKnowledId"  :disabled="peknowledgebaseView"></picture-upload>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="附件上传" name="9" class="paddingbottom24">
                        <div  v-if="activeName==='9'"><enclosureUpload :epKnowledId="epKnowledId" enclosureType="1" :disabled="peknowledgebaseView"></enclosureUpload> </div>
                    </el-tab-pane>
                     <!-- <el-tab-pane label="Excel上传" name="12" class="paddingbottom24">
                        <div  v-if="activeName==='12'"><enclosureUpload :epKnowledId="epKnowledId" enclosureType="2" :disabled="peknowledgebaseView"></enclosureUpload> </div>
                    </el-tab-pane> -->
                </el-tabs>
            </div>
        </el-dialog>
        <el-dialog v-if="dialog.action===2" :title="dialog.title" :width="dialog.width" top="30px" :visible.sync="dialog.isShow" :close-on-click-modal="false" style="padding: 24px;box-sizing:border-box;">
            <div  style="dialogHeightPane">
                <pe-tag :isRelation='false' :disabled="peknowledgebaseView"></pe-tag>
            </div>
        </el-dialog>
        <el-dialog v-if="dialog.action===0" :title="dialog.title" :width="dialog.width" top="30px" :visible.sync="dialog.isShow" :close-on-click-modal="false" style="padding: 24px;box-sizing:border-box;">
            <div>
                <el-form ref="epKnowledForm" :model="epKnowledForm"  :rules="rules" label-width="90px" class="epKnowledForm">
                    <el-form-item label="疾病与技术" prop="diseaseName">
                        <el-input v-model="epKnowledForm.diseaseName"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="疾病状态" prop="diseaseStatus">
                        <el-input v-model="epKnowledForm.diseaseStatus"></el-input>
                    </el-form-item>
                    <el-form-item label="治疗科室" prop="dept" >
                        <el-input v-model="epKnowledForm.dept"></el-input>
                    </el-form-item>
                    <el-form-item label="推荐等级" prop="level">
                        <el-input v-model="epKnowledForm.level"></el-input>
                    </el-form-item>
                    <el-form-item label="TA方法">
                        <el-input v-model="epKnowledForm.ta"></el-input>
                    </el-form-item> -->
                </el-form>
            </div>
            <template slot="footer">
                <el-button @click="addUpdata()" type="primary" size="small" >{{dialog.type == 'update' ? '修改' : '新增'}}</el-button>
            </template>
        </el-dialog>
        <el-dialog  :title="dialog1.title" width="90%" top="30px" :visible.sync="dialog1.isShow" :close-on-click-modal="false" style="padding: 24px;box-sizing:border-box;">
              <summary-view :epKnowledId="epKnowledId"></summary-view>
              <div class="paddingbottom24"></div>
        </el-dialog>
    </div>
</template>
<script>
import bloodKnowledgeApi from 'plugins/axios/bloodKnowledgeApi.js'
import peDetail from "./components/peDetail.vue"
import primarySources from "./components/primarySources.vue"
import pictureUpload from "./components/pictureUpload.vue"
import enclosureUpload from "./components/enclosureUpload.vue"
import summaryView from "./components/summaryView.vue"
import peTag from "./components/tag.vue"
import {mapState} from 'vuex'
export default {
    name:"PEKnowledgebase",
    components:{
        peDetail,
        primarySources,
        pictureUpload,
        enclosureUpload,
        summaryView,
        'pe-tag':peTag
    },
    data (){
        return {
            searchList:{
                diseaseName:'',
                creator:'',
                diseaseStatus:'',
                dept:'',
                ta:'',
                level:''
            },
            pagination:{
                pageSize:10,
                currentPage:1,
                total:0
            },
            dialog:{
                isShow:false,
                action:0,/**0-新增修改pe知识库 1-展示pe知识库详情 */
                width:'500px',
                type:'',
                title:''
            },
            dialog1:{
                isShow:false,
                title:''
            },
            loading:false,
            tabaleData:[],
            creatorList:[],/**创建人列表 */
            epKnowledForm:{},
            rules:{
                diseaseName:[{required: true, message: '请输入疾病或者技术名称', trigger: 'blur' }],
                // dept:[{required: true, message: '请输入治疗科室', trigger: 'blur' }],
                // level:[{required: true, message: '请输入推荐等级', trigger: 'blur' }]
            },
            dialogHeightPane: {
                height: (document.documentElement.clientHeight - 180) + 'px',
                overflowY: 'auto'
            },
            activeName:'1',
            changeActive:'',
            epKnowledId:'',
            peknowledgebaseView:false,
        }
    },
    computed:{
        ...mapState({clientHeight:state=>state.common.clientHeight}),
        tableHeight(){
            return this.clientHeight-184;
        }

  },
    created (){
        let self = this;
        self.getPEList();
        bloodKnowledgeApi.userList().then(res=>{
            self.creatorList =res.content;
        })
    },
    mounted(){
        let self = this;
        if(sessionStorage.getItem('roles')){
            JSON.parse(sessionStorage.getItem('roles')).forEach(item => {
                if(item.role_code==='ROLE_peknowledgebase_view'){
                    self.peknowledgebaseView=true;
                }
            });
        }
        
    },
    methods:{
        getPEList(){/**获取PE知识库列表 */
            let self = this;
            let list = {
                currentPage: self.pagination.currentPage,
                pageSize:self.pagination.pageSize
            };
            self.loading=true;
            self.searchList.diseaseName ? list.diseaseName=self.searchList.diseaseName : '';
            self.searchList.diseaseStatus ? list.diseaseStatus=self.searchList.diseaseStatus : '';
            self.searchList.dept ? list.dept=self.searchList.dept : '';
            self.searchList.level ? list.level=self.searchList.level : '';
            self.searchList.ta ? list.ta=self.searchList.ta : '';
            self.searchList.creator ? list.creator=self.searchList.creator : '';
            bloodKnowledgeApi.PEList(list).then(res=>{
                self.tabaleData=res.content.records;
                self.pagination.total = res.content.total;
                self.loading=false;
            },error=>{
                self.loading=false;
            })
        },
        searchData(){/**搜索 */
            this.pagination.currentPage =1;
            this.getPEList();
        },
        isShowDialog(type,row){
            let self = this;
            let postData =self.epKnowledForm;
            switch(type){
                case "detail":
                    self.dialog.action = 1;
                    self.dialog.width="90%";
                    self.dialog.title=`详情内容`;
                    self.epKnowledForm=row;
                    self.activeName='1';
                    self.changeActive=self.activeName;
                    self.epKnowledId=row.id;
                break;
                case 'tag':
                self.dialog.action = 2;
                self.dialog.width="1000px";
                self.dialog.title=`标签详情`;
                break;
                default:
                    self.dialog.action = 0;
                    self.dialog.width="500px";
                    self.dialog.title=`${type==='update'?'修改':'新增'}PE知识库`;
                    self.dialog.type = type;
                    self.epKnowledForm = type==='update'?row:{}
                break;
            }
             self.dialog.isShow = true;

        },
        addUpdata(){/**新增或修改知识库弹框*/
            let self =this,
            postData={
                diseaseName:self.epKnowledForm.diseaseName,
                diseaseStatus:self.epKnowledForm.diseaseStatus,
                dept:self.epKnowledForm.dept,
                level:self.epKnowledForm.level,
                ta:self.epKnowledForm.ta
            };

            if( self.dialog.type === "update"){
                postData.id = self.epKnowledForm.id;
            }
             this.$refs['epKnowledForm'].validate((valid) => {
                if (valid) {
                    bloodKnowledgeApi.addUpdatePeDisease( self.dialog.type,postData).then(res=>{
                        self.$message.success(`${ self.dialog.type =='update'?'修改':"新增"}成功！`);
                        self.dialog.isShow=false;
                        self.getPEList();
                    })
                } else {}
            });
        },
        deleteDate(row){/**弹出删除知识库弹框*/
            let self = this;
            self.$confirm('是否删除此知识库?', '提示', {
                confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    bloodKnowledgeApi.deletePeDisease(row.id).then(res=>{
                        self.getPEList();
                        self.$message.success("删除成功！");
                    },error=>{
                        self.$message.error("删除失败！");
                    })
                }).catch(() => {
            });
        },
        handleSizeChange(size){
            this.pagination.pageSize =size;
            this.getPEList();
        },
        handleCurrentChange(currentPage){
            this.pagination.currentPage =currentPage;
            this.getPEList();

        },
        handleClick(tab, event){
            let self = this;
            switch(self.activeName){
                case '1'://疾病概述
                case '2'://流行病学
                case '3'://医学经济学
                case '4'://诊断标准
                case '5'://传统治疗
                case '6'://副作用及应对
                case '10'://评估标准
                case '11'://UBIO治疗
                    self.changeActive=self.activeName;
                    break;
                case '7'://原文献
                case '8'://图片集
                case '9'://PPT资料
                case '12'://Excel上传
                    break;
            }
        },
        isShowDialog1(row){
            let self = this;
            self.dialog1.title='汇总查看';
            self.dialog1.isShow = true;
            self.epKnowledId = row.id;
        }
    }
}
</script>
<style scoped>
.searchLine{
    margin:16px 0;
}
.epKnowledForm{
    width:460px;
    margin:16px auto;
}
.noMarginBottom{
    margin-bottom: 0;
}
.table-index{
    margin-bottom: 16px;
}
.paddingbottom24{
    padding-bottom: 24px;
}
</style>